<template>
  <div class="cont">
    <div style="color:#ffffff; font-weight: 600; width: 100%;font-size: 50px; position: absolute; top: 10%;display: flex;
    justify-content: center;">
      家谱管理系统
    </div>
    <div class="login">
      <div class="title-container">
        <h1 class="title" style="text-align:center; color:#fff;">LOGIN</h1>
      </div>
      <el-tabs   :stretch="true" v-model="activeName" >
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="userName" style="width: 410px;">
              <el-input v-model="form.loginName" placeholder=" 邮箱 | 帐号 | 手机号" clearable prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item prop="userPassword" style="width: 410px;">
              <el-input v-model="form.userPassword" placeholder=" 请输入密码" clearable prefix-icon="el-icon-lock" show-password
                        type="password"></el-input>
            </el-form-item>

            <el-form-item>
              <div style="display:flex;">
                <el-input v-model="form.validCode" placeholder=" 请输入验证码" prefix-icon="el-icon-key" style="width: 50%; margin-right: 20px; "></el-input>
                <ValidCode @input="createValidCode"/>
              </div>
            </el-form-item>
            <el-button label-position="right" style="margin-left:80px;" type="primary" @click="onSubmit">登录</el-button>
          </el-form>

      </el-tabs>
    </div>

  </div>


</template>

<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode"

export default {
  name: "login",
  components: {ValidCode},
  data() {
    return {
      activeName: 'first', // 默认打开的标签
      loadCode: "",
      validCode: "",
      emailLoginForm:{
        email: '',
        code: '',
      },
      form: {
        loginName: '',
        userPassword: '',
      },
      buttonText:"获取验证码",
      emailLoginFormRules:{
        email: [
          {required: true, message: '邮箱地址不能为空', trigger: 'blur'},
        ],
        code: [
          {max: 4, message: '验证码长度错误', trigger: 'blur'},
        ],
      },
      rules: {

        loginName: [
          {required: true, message: '登录名不能为空', trigger: 'blur'},
        ],
        userPassword: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
      },
      userType: "",
    }
  },

  methods: {
    goForgetPass(){
      this.$router.push('/forget'); // 跳转到主页
    },
    // 邮箱获取验证码
    getCode(){
      if (!this.emailLoginForm.email) {
         this.$message.warning('请输入邮箱地址');
         return;
      }
      //2683817385@qq.com
      if (/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(this.emailLoginForm.email)) {
        this.$message.warning("请输入正确的邮箱地址")
        return;
      }
      // 最后发送邮箱
      request.post("/user/email/"+this.emailLoginForm.email+"/"+1).then(res =>{
        console.log(res)
        if (res.code === '200') {
          this.$message.success("发送成功，请注意查收邮箱信息");
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    createValidCode(data) {
      this.validCode = data;
    },
    onSubmit() {

      // 表单校验是否合法，不合法不走请求
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.validCode) {
            this.$message.error("请填写验证码");
            return
          }
          if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("验证码错误");
            location.reload();
            return
          }
          // 走请求开始判断用户名密码是否存在
          request.post("/user/login", this.form).then(resp => {  // res中返回的数据是true或false
                console.log(resp.data)
                if (resp.code === '200') {
                  sessionStorage.setItem("user", JSON.stringify(resp.data))
                  localStorage.setItem("menus", JSON.stringify(resp.data.menuList));
                  // setRoutes();
                  this.$router.replace('/main/home'); // 跳转到主页
                  this.$message.success("登陆成功，欢迎回来");
                } else if (resp.code === '500') {
                  this.$message.error(resp.msg);
                } else if (resp.code === '600') {
                  this.$message.error(resp.msg)
                }
              }
          );
        } else {
          return false; // 失败不走请求
        }
      });
    },
    onSubmitEmail(){
      if (!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(this.emailLoginForm.email)) {
        this.$message.warning("请输入正确的邮箱地址")
        return false;
      }
      this.$refs["emailLoginForm"].validate(valid2 => {
        if (valid2) {
          // 走请求开始判断用户名密码是否存在
          request.post("/user/email/login", this.emailLoginForm).then(resp => {  // res中返回的数据是true或false
                console.log(resp.data)
                if (resp.code === '200') {
                  sessionStorage.setItem("user", JSON.stringify(resp.data))
                  localStorage.setItem("menus", JSON.stringify(resp.data.menuList));
                  // setRoutes();
                  this.$router.replace('/main/home'); // 跳转到主页
                  this.$message.success("登陆成功，欢迎回来");
                } else if (resp.code === '500') {
                  this.$message.error(resp.msg);
                }else if (resp.code === '403'){
                  // this.$message.error(resp.msg);
                  this.$message({
                    message: resp.msg,
                    type: 'error',
                    duration:2000,
                  });
                  this.activeName = 'second'
                }
              }
          );
        }
      });
    }
  },
}
</script>

<style scoped>
.el-form-item__label {
  color: #2b41ce;
}
.container{
  position: relative;
  width: 330px;
  background-color: #f1f1f1;
}
/deep/ .el-tabs__item {
  color: #ffffff;
}
.container input{
  width: 100%;
  height: 30px;
}
.container .el-button{
  position: absolute;
  /* 去掉点击按钮后的边框*/
  outline: none;
  top: 16px;
  right: 10px;
  background-color: #fff;
  /* 去掉边框*/
  border: none;
}
.cont{
  position: fixed;
  height: 100%;
  width: 100%;
  background-image:linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186)) /* 标准的语法 */
}
.cont .login {

  width: 500px;
  height: 400px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -70%);
  padding: 20px;
  box-shadow: 0 0 30px #d9d6c3; /*阴影*/
  border: 1px solid #d9d6c3; /*div边框*/
  border-radius: 5px;
}

.el-button {
  padding: 12px 150px;
}

.register {
  padding: 13px 0 0 240px;
}

</style>
